<template>
    <Sider class="system-sidebar">
        <div class="user-info" @click="toInfo">
            <p class="user-avatar">
                <img :src="defaultUserface" v-real-img="userfaceUrl" alt="用户头像" class="avatar">
            </p>
            <span class="username" :title="userInfo.userName">{{ userInfo.userName }}</span>
        </div>
        <Menu theme="light" :active-name="activeName" width="220px" accordion>
            <template v-for="item in menuList">
                <Submenu v-if="item.children && item.children.length" :key="item.name" :name="item.name">
                    <template slot="title">
                        <i class="iconfont" :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <template v-for="child in item.children">
                        <MenuItem v-show="!child.level || (child.level && userInfo.department.level <= child.level)" :key="child.name" :name="child.name" :to="child.to">
                            {{ child.title }}
                        </MenuItem>
                    </template>
                </Submenu>

                <MenuItem v-else :name="item.name" :to="item.to" :key="item.name">
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </MenuItem>
            </template>
        </Menu>
    </Sider>
</template>

<script>
import { mapGetters } from 'vuex'
import { FileURL } from '@/common/apis/config'
import menuList from '@/common/utils/menu'
import { defaultUserface } from '@/common/utils/const'

export default {
    name: 'systemSidebar',
    props: {
        menuList: {
            type: Array,
            default: function () {
                return menuList
            }
        }
    },
    data() {
        return {
            defaultUserface
        }
    },
    computed: {
        ...mapGetters(['userInfo']),
        activeName() {
            if (this.$route.meta.activeName) {
                return this.$route.meta.activeName
            } else {
                return this.$route.name
            }
        },
        userfaceUrl() {
            return FileURL + this.userInfo.userface
        }
    },
    methods:{
        toInfo(){
            this.$router.push({path: '/userinfo'})
        }
    }
}
</script>
